<template>
       <div class="shop_header" v-if="hdata.length !=0" >
        <div class="bg">
            <img :src="'//elm.cangdu.org/img/'+hdata.image_path" alt="">
        </div>
        <div class="black">
            <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
        </div>
        <div class="shop_msg">
            <div class="shop_img">
                <img :src="'//elm.cangdu.org/img/'+hdata.image_path" alt="">
            </div>
            <div class="shop_center">
                <div class="shopName"> {{hdata.name}}</div>
                <div class="shop_attr">{{hdata.category}}</div>
                <div class="shop_tip">
                   公告： {{hdata.promotion_info}}
                </div>
            </div>
            <div class="shop_right" @click="$emit('showPop')">
                <van-icon name="arrow"></van-icon>
            </div>
        </div>

        <div class="actively" v-if="hdata.activities.length !=0" @click="$emit('showOverly')">
            <div>
                <van-tag type="primary" color="rgb(240, 115, 115)">减</van-tag> 满30减5，满60减8（APP专享）
            </div>
            <div>
                 {{hdata.activities.length}}个活动 <van-icon name="arrow"></van-icon>
            </div>
        </div>

        
    </div>
</template>

<script>
    export default {
        props:['hdata'],
        data(){
            return{
                datlist:[],
            }
        },
       
    }

</script>


<style lang="less" scoped>
    .shop_header{
        width: 100%;
        height: 120px;
        position: relative;
        color: #fff;
        .bg{
            width: 100%;
            height: 120px;
            overflow: hidden;
            position: absolute;
            top: 0;
            z-index: -1;
            img{
                width: 100%;
                filter: blur(3px);
            }
        }
        .black{
            position: absolute;
            top: 5px;
            left: 5px;
            font-size: 20px;
        }
        .shop_msg{
            display: flex;
            justify-content: space-between;
            padding: 15px 10px;
            padding-bottom: 5px;
            .shop_img{
                width: 20%;
                img{
                    width: 100%;
                }
            }
            .shop_center{
                width: 70%;
                height: 75px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                 .shopName{
                font-size: 20px;
                font-weight: 700;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .shop_attr{
                font-size: 13px;
            }
            .shop_tip{
                width: 100%;
                font-size: 13px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            }
            .shop_right{
                line-height: 75px;
            }
           
        }
        .actively{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color:#fff;
            padding:0 10px ;
        }
    }
</style>